<template>
  <div class="home">

    <div class="detail_box">
      <!-- 操作 -->
      <div class="operate_box">

        <div class="item_box">

            <div class="operate_item" v-if="userType !== 6">
              <label>仓库：</label>
              <el-select
                filterable
                v-model="warehouseId"
                placeholder="请选择仓库">
                <el-option
                  v-for="(item,index) in warehouseOption"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>

          <div class="operate_item" v-if="userType !== 6 && warehouseId">
            <label>配送员：</label>
            <el-select
              filterable
              v-model="sendId"
              placeholder="请选择配送员" clearable>
              <el-option
                v-for="(item,index) in senderOption"
                :key="index"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>

          <time-filter @getTime="listenToChild" :proTime="proTime"></time-filter>

          <div class="operate_item">
            <span class="operate_btn search_btn" @click="searchData" style="margin-left: 20px;">查询</span>
            <span class="operate_btn reset_btn" @click="resetTable">重置</span>
          </div>
        </div>


      </div>
      <div style="display: flex;">
        <!--右边菜单栏-->
        <div class="left_menu" v-if="userType !== 6">
          <div class="menu">
            <div class="menu_item" style="border:0;">
              <div class="menu_info menu_header">
                <div style="margin-left: 22px;">
                  <p>ID</p>
                </div>
                <div>
                  <p style="margin-left: -35px;">配送员</p>
                </div>
              </div>
            </div>

            <div class="null" v-if="menuData.length <= 0">暂无数据</div>

            <div :class="menuIndex == index ? 'menu_item selected_menu' : 'menu_item'" v-for="(item,index) in menuData"
                 @click="getAll(index,item.id)">
              <div class="menu_icon">
                <i class="el-icon-s-custom" style="font-size: 20px; color: gray"></i>
              </div>
              <div class="menu_info">
                <div class="user_info" style="width:70px;">
                  <p class="menu_detail">{{ item.id ? item.id : '--' }}</p>
                </div>

                <div class="user_info" :title="item.name">
                  <p class="menu_detail">{{ item.name ? item.name : '--' }}</p>
                </div>

              </div>
            </div>
          </div>

        </div>

        <div :style="{width: (userType !== 6 ? '85%': '100%')}">
          <!-- 表格 -->
          <div class="flex_box">
            <div class="detail_part">
              <div class="table_box">
                <el-table
                  border
                  height="620"
                  v-loading="loading"
                  :header-cell-style="tableHeader"
                  ref="multipleTable"
                  :data="tableInfo"
                  tooltip-effect="dark"
                  highlight-current-row
                  style="width: 100%;">

                  <el-table-column
                    prop="productName"
                    label="商品名">
                    <template slot-scope="scope">{{ scope.row.productName ? scope.row.productName : '——' }}</template>
                  </el-table-column>

                  <el-table-column
                    label="数量">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.numbers ? scope.row.numbers : 0 }}
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column
                    width="180"
                    prop="money"
                    label="回收空桶数">
                    <template slot-scope="scope">
                      <div>
                    <span style="color: #f7ab20"
                          title="回收空桶数">{{ scope.row.returnNumber ? scope.row.returnNumber : 0 }}</span>
                      </div>
                    </template>
                  </el-table-column>

                </el-table>

              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="footer">
        <div class="record_page">
          <span class="page_count">共<i>{{ totals }}</i>条</span>
          <el-pagination
            @size-change="sizeChange"
            @current-change="getTableInfo"
            background
            :current-page="currentPage"
            :page-sizes="[15, 20, 30, 40]"
            :page-size="pageSize"
            layout="prev, pager, next, sizes,jumper"
            :total="totals">
          </el-pagination>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import commons from "@/utils/common";
import {judgeRole} from "@/utils/warehouseAuth";
import {particularSum} from "@/api/data/user/productSend";
import {getBtn} from "@/utils/btnAuth";
import {getAllData,listData} from "@/api/basic/warehouse/sender";
import timeFilter from "@/components/timeFilter"

export default {
  components: {
    timeFilter
  },
  data() {
    return {
      proDate: '',
      keyword: '',
      currentPage: 1,
      pageSize: 15,
      totals: 0,
      loading: false,
      tableInfo: [],
      menuData: [],
      warehouseOption: [],
      filterSenderOption:[],
      warehouseId:'',
      btn: {},
      menuIndex: 'all',
      senderId:'',
      sendId:'',
      senderOption:[],
      roleHouse:{},
      proTime:'',
      userInfo:{},
      userType:'',
      isGet:false,
    }
  },
  mounted() {
    this.roleHouse = judgeRole();
    this.warehouseOption = this.roleHouse.list;
    this.warehouseId = this.roleHouse.id;

    //获取用户类型
    let info = localStorage.getItem('water_user')
    this.userInfo = info?JSON.parse(info).loginUser:'';
    this.userType = this.userInfo.type;
    if(this.userType === 6) {
      this.senderId = this.sendId = this.userInfo.id
    }
    this.getDayTime(-1);
    this.btn = getBtn();

    if (this.btn.query && this.btn.all) {
      this.getTableInfo(1);
    }

  },
  methods: {
    //时间选择组件
    listenToChild(e) {
      if(e.date && !e.isFirst) {
        this.proDate = e.date;
          this.getAll('');
      }
    },
    //重置后的时间回显
    //type: 0 今天 1：明天 -1:昨天
    getDayTime(dates) {
      let dd = new Date();
      let n = dates || 0;
      dd.setDate(dd.getDate() + n);
      let y = dd.getFullYear();
      let m = dd.getMonth() + 1;
      let d = dd.getDate();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      let day = y + "-" + m + "-" + d;
      this.proDate = this.proTime = [day, day];
    },

    // 获取列表信息
    getTableInfo(page) {
      let that = this;
      that.currentPage = page;
      this.tableInfo = [];
      let queryParams = {
        limit: that.pageSize,
        page: page,
        id:that.sendId,
        warehouseId:that.warehouseId
      }
      listData(queryParams).then(res => {
        that.menuData = res ? res.list : [];
        that.totals = res ? res.count : 0;
      }).catch((e) => {
      });
    },
    // 获取配送员
    getSender() {
      let that = this;
      let queryParams = {
        warehouseId: that.warehouseId,
      };
      getAllData(queryParams).then(res => {
        that.senderOption = res ? res : [];
      }).catch((e) => {
        that.senderOption = [];
      })
    },

    getAll(index,id) {
      this.loading = true;
      if(index !== '') {
        this.menuIndex = index;
        this.senderId = id;
      }
      let that = this;
      let params = {
        warehouseId: that.warehouseId,
        startTime: that.proDate ? that.proDate[0] : '',
        endTime: that.proDate ? that.proDate[1] : '',
        sendId:this.senderId
      }
      particularSum(params).then((res) => {
        if (res) {
          this.tableInfo = res;
          this.loading = false;
        }
      })
    },
    searchData() {
      this.getTableInfo();
    },

    // 重置
    resetTable() {
      this.getDayTime(-1);
      this.pageSize = 15;
      if(this.userType !== 6) {
        this.sendId = '';
      }
      this.warehouseId = this.roleHouse.id ? this.warehouseId : '';
      this.getTableInfo()
    },


    formatTime(time) {
      return commons.formatTime(time)
    },

    sizeChange(val) {
      this.pageSize = val;
      this.getTableInfo(1)
    },

    // 设置table标题居中
    tableHeader({row, column, rowIndex, columnIndex}) {
      return 'background:#F0F2F5;color:#111;padding:10px 0;font-size:14px;font-weight:600'
    },
  },
  watch: {
    warehouseId(newW, oldW) {
      if (newW) {
        this.getSender();
        this.senderOption = [];
      }
    }
  }
}
</script>

<style scoped>
.user_info {
  width: 200px;
  /*height:40px;*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  white-space: nowrap;
  /*line-height: 40px;*/
}
.flex_box {
  display: flex;
}

.detail_part {
  width: 100%;
}
.footer {
  display: flex;
  justify-content: start;
  align-items: center;
}
.page_count {
  line-height: 32px;
}
.null {
  width: 100%;
  text-align: center;
  margin-top: 80px;
}

/*左边菜单栏*/
.left_menu {
  width:15%;
  margin-right:10px;
}
.menu {
  width: 100%;
  background-color: rgb(240, 242, 245);
  height: 618px;
  box-sizing: border-box;
  padding: 10px;
  overflow-y: scroll;
  margin-bottom: 15px;
  font-size: 14px;
}

.menu_item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(140, 141, 146, 0.2);
}

.selected_menu {
  background-color: rgba(0, 0, 0, 0.1) !important;
  color: gainsboro !important;
}

.menu_icon {
  margin-right: 30px;
  width: 10px;
  justify-content: space-between;
}

.menu_info {
  width: calc(100% - 55px);
  color: black;
  display: flex;
  /*text-align: center;*/
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: -5px;
}

.menu_info p {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.menu_detail {
  margin-top: 10px;
}

.menu_header div {
  width: 33%;
  text-align: center;
}
</style>
